<template>
  <div class="wrap-table user-p1">
    <div class="headerTop_ukl">
      <ul class="clearfix">
        <li>
          <p class="p1">
            <img src="../../assets/images/icon_yanjiuduixiang.png" alt />
            <span>研究对象</span>
          </p>
          <p class="p3">{{ userBasic.Surname }}({{ userBasic.ResearchNo }})</p>
        </li>
        <li>
          <p class="p1">
            <img src="../../assets/images/icon_ganyuzu.png" alt />
            {{ userBasic.GroupType | GroupType }}
          </p>
          <p class="p3" v-if="userBasic.Period != '3'">
            <span v-if="userBasic.GroupType == 1">{{
              userBasic.IntensityOfIntervention | IntensityOfIntervention
            }}</span>
          </p>
          <p class="p3" v-else>
            <span v-if="userBasic.GroupType == 1">{{
              userBasic.ChildIntensityOfIntervention | IntensityOfIntervention
            }}</span>
          </p>
        </li>
        <li>
          <p class="p1">
            <img src="../../assets/images/icon_huaiyunqi.png" alt />
            {{ userBasic.Period | Period }}
          </p>
          <p class="p3">
            <span v-if="userBasic.Period == 2"
              >预产期：{{ userBasic.ExpectedDate }},{{ userBasic.PregnancyWeek }}</span
            >
          </p>
          <p class="p3">
            <span v-if="userBasic.Period == 3"
              >出生日期：{{ userBasic.ChildBirthDate }},{{ userBasic.ChildAge }},
              {{ userBasic.ChildSex | ChildSex }}</span
            >
          </p>
             <p class="p3"><span v-if="userBasic.Period==4">出生日期：{{userBasic.ChildBirthDate}},{{getChildAge2(userBasic.ChildBirthDate)}}, {{userBasic.ChildSex|ChildSex}} </span></p>
        </li>
      </ul>
    </div>
    <!---->
    <el-tabs v-model="activeName2" @tab-click="handleClick">
      <el-tab-pane label="跟踪记录" name="first" :lazy="true">
        <el-button
          type="primary"
          class="pull-right mg-20-auto"
          @click="Output"
          style="margin-left: 20px"
          >导出</el-button
        >
        <el-button
          type
          class="pull-right mg-20-auto"
          @click="addRecord"
          v-if="userBasic.Period == 3 || userBasic.Period == 4"
          >添加</el-button
        >
        <template>
          <el-table
            :data="tableData"
            border
            v-loading="loading"
            height="500"
            element-loading-text="加载中"
            style="width: 100%; margin-top: 30px"
          >
            <el-table-column
              prop="RecordDate"
              align="center"
              label="访问日期"
              :show-overflow-tooltip="true"
              min-width="120"
            ></el-table-column>
            <el-table-column
              prop="Height"
              label="身长(身高)(cm)"
              align="center"
              min-width="160"
            ></el-table-column>
            <el-table-column
              prop="RecordMethod"
              align="center"
              :formatter="CreateTimeFilter"
              label="测量方式"
              min-width="100"
            ></el-table-column>
            <el-table-column
              prop="IsGevenEquipment"
              align="center"
              label="发放身高体重测量仪"
              :formatter="IsGevenEquipmentFilter"
              min-width="150"
            ></el-table-column>
            <el-table-column
              prop="Weight"
              align="center"
              label="体重(kg)"
              min-width="100"
            ></el-table-column>

            <el-table-column
              prop="IsEdema"
              align="center"
              :formatter="PeriodFilter"
              label="水肿"
              min-width="80"
            ></el-table-column>
            <el-table-column
              prop="ZValue1"
              align="center"
              label="身长/体重(Z值)"
              min-width="160"
            >
              <template slot-scope="scope">
                <span
                  style="display: inline-block"
                  :class="{
                    color1: scope.row.ZValue1Color == '1',
                    color2: scope.row.ZValue1Color == '2',
                    color3: scope.row.ZValue1Color == '3',
                    color4: scope.row.ZValue1Color == '4',
                  }"
                >
                  {{ scope.row.ZValue1 }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="ZValue2"
              align="center"
              label="年龄/身长(Z值)"
              min-width="160"
            >
              <template slot-scope="scope">
                <span
                  style="display: inline-block"
                  :class="{
                    color1: scope.row.ZValue2Color == '1',
                    color2: scope.row.ZValue2Color == '2',
                    color3: scope.row.ZValue2Color == '3',
                    color4: scope.row.ZValue2Color == '4',
                  }"
                >
                  {{ scope.row.ZValue2 }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="ZValue3"
              align="center"
              label="年龄/体重(Z值)"
              min-width="160"
            >
              <template slot-scope="scope">
                <span
                  style="display: inline-block"
                  :class="{
                    color1: scope.row.ZValue3Color == '1',
                    color2: scope.row.ZValue3Color == '2',
                    color3: scope.row.ZValue3Color == '3',
                    color4: scope.row.ZValue3Color == '4',
                  }"
                >
                  {{ scope.row.ZValue3 }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="ZValue4"
              align="center"
              label="BMI(Z值)"
              min-width="100"
            >
              <template slot-scope="scope">
                <span
                  style="display: inline-block"
                  :class="{
                    color1: scope.row.ZValue4Color == '1',
                    color2: scope.row.ZValue4Color == '2',
                    color3: scope.row.ZValue4Color == '3',
                    color4: scope.row.ZValue4Color == '4',
                  }"
                >
                  {{ scope.row.ZValue4 }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="DataSource"
              align="center"
              label="数据来源"
              :formatter="DataSourceFilter"
              min-width="100"
            ></el-table-column>
            <el-table-column
              prop="Recorder"
              align="center"
              label="操作人员"
              min-width="100"
            ></el-table-column>
            <el-table-column align="center" fixed="right" label="操作" min-width="120">
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="text"
                  label
                  @click="handleEdit(scope.$index, scope.row)"
                  >修改</el-button
                >
                <el-button size="small" type="text" label @click="romoveHandle(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!--分页-->
        <div class="block mg-20-auto">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageId"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图形分析" name="secound"  :lazy="true">
        <div style="width: 100%; text-align: center">
          <el-select
            @change="changeType"
            v-model="testType"
            placeholder="请选择"
            style="width: 200px; margin: 30px auto 20px auto"
          >
            <el-option label="身长/体重" value="3"></el-option>
            <el-option label="年龄/身长" value="1"></el-option>
            <el-option label="年龄/体重" value="2"></el-option>

            <el-option label="BMI" value="4"></el-option>
          </el-select>
        </div>
        <echarts :options="chartsInfo1" chartId="infoChart1"></echarts>
        <p style="text-align: center">采用世卫组织标准</p>
        <div style="position: absolute; top: 20%; left: 20%" v-show="showTop">
          <p>
            <span style="padding-right: 15px"
              >年龄：{{ birthWeek }}周+{{ birthDay }}天</span
            >
            <span>Z值：{{ Zvalue }}</span>
          </p>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      :title="title"
      :visible.sync="dialogForm"
      :append-to-body="true"
      top="0"
      width="60%"
      :close-on-click-modal="false"
    >
      <el-form
        :model="addForm"
        :rules="rules"
        ref="addForm"
        label-position="left"
        label-width="160px"
        class="demo-ruleForm"
      >
        <el-form-item label="访问日期" prop="RecordDate">
          <el-date-picker
            v-model="addForm.RecordDate"
            type="date"
            :disabled="false"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions2"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="身长(cm)" prop="Height">
          <el-input v-model="addForm.Height" type="number"></el-input>
        </el-form-item>
        <el-form-item label="体重(kg)" prop="Weight">
          <el-input v-model="addForm.Weight" type="number"></el-input>
        </el-form-item>
        <el-form-item label="身长测量方式" prop="RecordMethod">
          <el-radio-group v-model="addForm.RecordMethod">
            <el-radio label="1">平躺</el-radio>
            <el-radio label="2">站立</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="水肿" prop="IsEdema">
          <el-radio-group v-model="addForm.IsEdema">
            <el-radio label="1">是</el-radio>
            <el-radio label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="发放身高体重测量仪" prop="IsGevenEquipment">
          <el-radio-group v-model="addForm.IsGevenEquipment">
            <el-radio label="1">是</el-radio>
            <el-radio label="2">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="数据来源" prop="DataSource">
          <el-select v-model="addForm.DataSource" clearable placeholder="请选择">
            <el-option value="1" label="项目随访"></el-option>
            <el-option value="2" label="肥胖门诊"></el-option>
            <el-option value="3" label="其他机构"></el-option>
            <el-option value="4" label="家长自测"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作人员" class="is-required">
          <el-select v-model="addForm.Recorder" clearable placeholder="请选择">
            <el-option
              v-for="(item, index) in optionsNurse"
              :key="index"
              :label="item.NurseName"
              :value="item.NurseName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogForm = false">取 消</el-button>
        <el-button type="primary" :disabled="editorOff" @click="editorRow('addForm')"
          >保 存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import {getChildAge2} from '@/utils/index'
import echarts from "../home/echartsC.vue";
import {filterPeriod,filterIntensityOfIntervention} from '@/utils/localDic'
import {getChildAge2Year} from '@/utils/index'
export default {
  name: "userP1",
  data() {
    return {
      tableData: [],
      pageId: 1,
      total: null,
      loading: false,
      pageSize: 10,
      optionsNurse: [],
      showTop: false,
      dialogForm1: false,
      innerVisible: false,
      Period: "",
      activeName2: "first",
      maxHeight: "",
      topMAX: "5",
      itemType: "",
      dialogVisible: false,
      ArticleContent: "",
      sysId: "",
      mobile: "",
      dialogForm: false,
      researchNo: "",
      age: "",
      Zvalue: "",
      optionsRecorder: [],
      isactive: true,
      title: "添加跟踪记录",
      userBasic: {
        Surname: "",
        ResearchNo: "",
        ExpectedDate: "",
        Period: "",
        IntensityOfIntervention: "",
        GroupType: "",
      },
      pickerOptions2: {
        disabledDate: function (val) {
          if (val > new Date()) return true;
        },
      },
      //   这个要设置成类目轴
      addForm: {
        Height: "",
        Weight: "",
        RecordDate: "",
        RecordMethod: "",
        IsGevenEquipment:"",
        IsEdema: "",
        DataSource: "",
      },
      changeVal: "2",
      FillInDate: "",
      PeriodFilter(row, column, cellValue, index) {
        return cellValue == 1 ? "是" : "否";
      },
      rules: {
        Height: [{ required: true, message: "必填项", trigger: "blur" }],
        Weight: [{ required: true, message: "必填项", trigger: "blur" }],
        RecordDate: [{ required: true, message: "必填项", trigger: "blur" }],
        RecordMethod: [{ required: true, message: "必填项", trigger: "blur" }],
        IsEdema: [{ required: true, message: "必填项", trigger: "blur" }],
        IsGevenEquipment: [{ required: true, message: "必填项", trigger: "blur" }],
        Recorder: [{ required: true, message: "必填项", trigger: "blur" }],
        DataSource: [{ required: true, message: "必填项", trigger: "blur" }],
      },
      CreateTimeFilter: function (row, column, cellValue, index) {
        return cellValue == 1 ? "平躺" : "站立";
      },
      IsGevenEquipmentFilter: function (row, column, cellValue, index) {
        return cellValue == '1' ? "是" : cellValue == '2' ? "否" :'-';
      },
      DataSourceFilter: function (row, column, cellValue, index) {
        return cellValue == 1
          ? "项目随访"
          : cellValue == 2
          ? "肥胖门诊"
          : cellValue == 3
          ? "其他机构"
          :cellValue == 4
          ? "家长自测" :
           "/";
      },
      rowlist: [],
      testType: "3",
      unitList: ["身长(身高)(厘米)", "体重(kg)", "体重(kg)", "BMI"],
      nameList: ["身长(高)", "体重", "体重", "BMI"],
      chartsInfo1: {
        grid: {
          left: "3%",
          top: "10%",
          right: "10%",
          bottom: "18%",
          containLabel: true,
        },
        legend: {
          data: [
            {
              name: "项目随访",
              icon: "image://static/img/second_icon.png",
            },
            {
              name: "肥胖门诊",
              icon: "image://static/img/third_icon.png",
            },
            {
              name: "其他机构",
              icon: "image://static/img/forth_icon.png",
            },
          ],
          y: "1%",
          itemWidth: 15,
          itemGap: 15,
          selectedMode: true,
        },
        legend: {
          show: true,
          align: "left",
          data: [
            { name: "身长", textStyle: { fontSize: 12 } },
            { name: "+3SD", textStyle: { fontSize: 12 } },
            { name: "+2SD", textStyle: { fontSize: 12 } },
            { name: "+1SD", textStyle: { fontSize: 12 } },
            { name: "0SD", textStyle: { fontSize: 12 } },
            { name: "-1SD", textStyle: { fontSize: 12 } },
            { name: "-2SD", textStyle: { fontSize: 12 } },
            { name: "-3SD", textStyle: { fontSize: 12 } },
            { name: "项目随访", textStyle: { fontSize: 12 } },
            { name: "肥胖门诊", textStyle: { fontSize: 12 } },
            { name: "其他机构", textStyle: { fontSize: 12 } },
          ],
          top: 0,
        },
        xAxis: {
          type: "value",
          name: "身长/cm",
          nameLocation: "end",
          min: 45,
          max: 120,
          interval: 30,
          boundaryGap: false,
          nameGap: 0,
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "#E6E6E6",
            },
          },
          axisLabel: {
            color: "#535353",
            fontSize: 14,
            formatter: function (value, index) {
              let num = +value;
              //  if( num%30 == 0 ){
              //       return parseInt(num / 30) + "月"
              //  }
              return value;
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#E6E6E6",
            },
            show: true,
          },
          name: "体重 kg",
          min: 0,
          axisLabel: {
            color: "#535353",
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          formatter: function (params, ticket) {
            //过滤显示内容
            let _html = "";
            params.forEach((item, index) => {
              if (item.seriesIndex != "7") {
                return;
              }
              let div = "";
              div += `${item.marker} ${item.seriesName}: ${item.data[1]}</br>`;
              _html += div;
            });
            return _html;
          },
        },
        // dataZoom: [
        //   {
        //     type: "inside",
        //     // start: 0,
        //     animation: true,
        //     // end: 20,
        //     // throttle:100,
        //     filterMode: "filter", // 设定为 'filter' 从而 X 的窗口变化会影响 Y 的范围。
        //     zoomOnMouseWheel: true,
        //     moveOnMouseWheel: true,
        //     preventDefaultMouseMove: true,
        //   },
        // ],
        series: [
          {
            name: "+3SD",
            type: "line",
            data: [],
            symbol: "none",
            smooth: true,
            itemStyle: {
              color: "#000",
            },
          },
          {
            name: "+2SD",
            type: "line",
            data: [],
            symbol: "none",
            smooth: true,
            itemStyle: {
              color: "red",
            },
          },
          {
            name: "+1SD",
            type: "line",
            data: [],
            symbol: "none",
            smooth: true,
            itemStyle: {
              color: "gold",
            },
          },
          {
            name: "0SD",
            type: "line",
            data: [],
            symbol: "none",
            smooth: true,
            itemStyle: {
              color: "green",
            },
          },
          {
            name: "-1SD",
            type: "line",
            data: [],
            symbol: "none",
            smooth: true,
            itemStyle: {
              color: "gold",
            },
          },
          {
            name: "-2SD",
            type: "line",
            data: [],
            smooth: false,
            symbol: "none",
            itemStyle: {
              color: "red",
            },
          },
          {
            name: "-3SD",
            type: "line",
            data: [],
            symbol: "none",
            smooth: true,
            itemStyle: {
              color: "#000",
            },
          },
          {
            name: "项目随访",
            type: "scatter",
            data: [],
            // symbol:'none',
            //  smooth:false,
            itemStyle: {
              color: "#409EFF",
            },
          },
          {
            name: "肥胖门诊",
            type: "scatter",
            data: [],
            itemStyle: {
              color: "#FFD700",
              // borderColor: '#EAA17F',
              // borderWidth: 1,
            },
          },
          {
            name: "其他机构",
            type: "scatter",
            data: [],
            itemStyle: {
              color: "#FF8080",
              // borderColor: '#8FBEF2',
              // borderWidth: 1,
            },
          },
        ],
      },
      editorOff: false,
      RecordDateZ: null,
    };
  },
  components: {
    echarts,
  },
  props: {
    changeIndex: {
      type: String,
    },
  },
  beforeMount: function () {
    let that = this;
    let appHeight = $(window).height();
    let autoheight = appHeight - 300 + "px";
    that.maxHeight = autoheight;
  },
  watch: {
    changeIndex: function (index) {
      if (index == "7") {
        this.getList();
      }
    },
    testType(val) {
      //  this.chartsInfo1.legend.data[0].name=this.nameList[parseInt(val)-1]
      this.chartsInfo1.yAxis.name = this.unitList[parseInt(val) - 1];
      if (val == 1) {
        this.chartsInfo1.yAxis.min = 45;
        this.chartsInfo1.xAxis = {
          type: "value",
          name: "年龄(天)",
          nameLocation: "end",
          min: 0,
          max: 730,
          interval: 30,
          boundaryGap: false,
          nameGap: 0,
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "#E6E6E6",
            },
          },
          axisLabel: {
            interval: 29,
            formatter: function (value, index) {
              let num = +value;
              //   if (num % 30 == 0) {
              //     return parseInt(num / 30) + "月";
              //   }
              return value;
            },
          },
        };
        if(this.getAgeType() == 2){
          this.chartsInfo1.xAxis.name = '年龄(月)'
          this.chartsInfo1.xAxis.max = 60
          this.chartsInfo1.xAxis.interval = 2
        }
      } else if (val == 2) {
        this.chartsInfo1.yAxis.min = 0;
        this.chartsInfo1.xAxis = {
          type: "value",
          name: "年龄(天)",
          nameLocation: "end",
          min: 0,
          max: 730,
          interval: 30,
          boundaryGap: false,
          nameGap: 0,
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "#E6E6E6",
            },
          },
          axisLabel: {
            interval: 29,
            formatter: function (value, index) {
              let num = +value;
              //   if (num % 30 == 0) {
              //     return parseInt(num / 30) + "月";
              //   }
              return value;
            },
          },
        };
        if(this.getAgeType() == 2){
          this.chartsInfo1.xAxis.name = '年龄(月)'
          this.chartsInfo1.xAxis.max = 60
          this.chartsInfo1.xAxis.interval = 2
        }
      } else if (val == 3) {
        this.chartsInfo1.yAxis.min = 0;
        // this.chartsInfo1.yAxis.max=25;
        this.chartsInfo1.xAxis = {
          type: "value",
          name: "身长/cm",
          boundaryGap: false,
          min: 45,
          max: 120,
          nameGap: 0,
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "#E6E6E6",
            },
          },
        };
      } else {
        this.chartsInfo1.yAxis.min = 0;
        this.chartsInfo1.xAxis = {
          type: "value",
          name: "年龄(天)",
          nameLocation: "end",
          min: 0,
          max: 730,
          interval: 30,
          boundaryGap: false,
          nameGap: 0,
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "#E6E6E6",
            },
          },
          axisLabel: {
            interval: 29,
            formatter: function (value, index) {
              let num = +value;
              //   if (num % 30 == 0) {
              //     return parseInt(num / 30) + "月";
              //   }
              return value;
            },
          },
        };
        if(this.getAgeType() == 2){
          this.chartsInfo1.xAxis.name = '年龄(月)'
          this.chartsInfo1.xAxis.max = 60
          this.chartsInfo1.xAxis.interval = 2
        }
      }
    },
  },
  computed: {
    ...mapGetters(["resechObj", "RoleGroup", "UserDic", "userIcon"]),
    LASTTIME: function () {
      let dateAlary = new Date(this.userBasic.ExpectedDate);
      return new Date(
        dateForm(dateAlary.setMonth(dateAlary.getMonth() - 9, dateAlary.getDate() - 7))
      );
    },
    yunzhou: function () {
      return parseInt(WeeksBetw(new Date(), this.LASTTIME) / 7);
    },
    yuntianshu: function () {
      return parseInt(WeeksBetw(new Date(), this.LASTTIME) % 7);
    },
    birthWeek() {
      if (this.RecordDateZ) {
        return parseInt(
          WeeksBetw(new Date(this.userBasic.ChildBirthDate), new Date(this.RecordDateZ)) /
            7
        );
      }
    },
    birthDay() {
      if (this.RecordDateZ) {
        return parseInt(
          WeeksBetw(new Date(this.userBasic.ChildBirthDate), new Date(this.RecordDateZ)) %
            7
        );
      }
    },
  },
  methods: {
     getChildAge2(val){ //获取儿童期2年龄
            return val && getChildAge2(val)
        },
    getAgeType(){
      console.log(this.userBasic)
      let age = getChildAge2Year(this.userBasic.ChildBirthDate)
      return age >=2 ? 2 : 1
    },
    handleSizeChange(val) {
      //条数改变
      this.pageSize = val;
      this.getList();
    },
    GetNurse: function () {
      let that = this;
      that
        .service({
          url: "/Sys/GetNurseForFollowup",
          method: "get",
          params: {
            communityId: JSON.parse(this.UserDic).CommunityId || "",
          },
        })
        .then((response) => {
          let options = response.dtData;
          for (let i of options) {
            //处理姓名账号不一致，Nan
            i.Name = i.Name || "";
            let username = i.Surname + i.Name;
            username == "undefined" ? (username = i.UserCode) : (username = username);
            i.icons = username;
          }
          that.optionsNurse = options;
        })
        .catch((data) => {});
    },
    Output() {
      //导出数据
      window.open(
        window.origin +
          "/API/105/" +
          "ExportChildPhysiqueHandler.ashx?researchObjectId=" +
          this.sysId
      );
    },
    watchContent(val) {
      this.dialogVisible = true;
      this.ArticleContent = val;
    },
    romoveHandle(row) {
      //删除
      let that = this;
      that
        .$confirm("确认要删除本条信息吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          that
            .service({
              url: "/ResearchObject/DeleteChildPhysique",
              method: "post",
              data: {
                ...row,
              },
            })
            .then((response) => {
              that.getList();
              that.getEchart(this.testType);
            })
            .catch((data) => {
              that.loadingQ = false;
            });
        })
        .catch(() => {
          that.dialogFormAnli = false;
          that.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    changeType(val) {
      this.getEchart(val);
    },
    getEchart(type) {
      let ageType = this.getAgeType()
      console.log(ageType)
      this.service({
        url: "/ResearchObject/GetChildPhysiqueLineData",
        method: "get",
        params: {
          researchObjectId: this.sysId,
          mobile: this.mobile,
          researchNo: this.researchNo,
          category: type,
          ageType: ageType,
        },
      })
        .then((res) => {
          console.log(res)
          let dtZ1s = res.dtData.dtZs,
            dtZ2s = res.dtData.dtZ2s,
            dtZ3s = res.dtData.dtZ3s,
            dtX = res.dtData.dtX,
            dtF1s = res.dtData.dtFs,
            dtF2s = res.dtData.dtF2s,
            dtF3s = res.dtData.dtF3s,
            monitorData = res.dtData.Table;
          let xData = [];
          dtZ1s.map((val, index) => {
            if (index != 0 && index % 30 == 0) {
              xData.push(index / 30 + "天");
            } else {
              xData.push(val.Xvalue);
            }
          });
          this.chartsInfo1.xAxis.data = xData;
          this.chartsInfo1.series[0].data = this.treatArray(dtZ3s);
          this.chartsInfo1.series[1].data = this.treatArray(dtZ2s);
          this.chartsInfo1.series[2].data = this.treatArray(dtZ1s);
          this.chartsInfo1.series[3].data = this.treatArray(dtX);
          this.chartsInfo1.series[4].data = this.treatArray(dtF1s);
          this.chartsInfo1.series[5].data = this.treatArray(dtF2s);
          this.chartsInfo1.series[6].data = this.treatArray(dtF3s);
          let dataOptios = this.treatArray(monitorData);
          let a = [],
            b = [],
            c = [];
          dataOptios.map((item, index) => {
            if (item[2] == "1") {
              a.push(item);
            } else if (item[2] == "2") {
              b.push(item);
            } else {
              c.push(item);
            }
          });
          this.chartsInfo1.series[7].data = a;
          this.chartsInfo1.series[8].data = b;
          this.chartsInfo1.series[9].data = c;
          res.dtData.zValue[0] ? (this.Zvalue = res.dtData.zValue[0].Zvalue) : "";
          res.dtData.zValue[0]
            ? (this.RecordDateZ = res.dtData.zValue[0].RecordDate)
            : "";
        })
        .catch((e) => {
          console.log(e);
        });
    },
    treatArray: function (data) {
      var arr = [];
      if (data.length > 0) {
        data.map(function (val) {
          arr.push(Object.values(val));
        });
      }
      return arr;
    },
    handleClick() {
      // this.getList();
      this.getEchart(this.testType);
    },
    handleCurrentChange(val) {
      //页数改变
      this.pageId = val;
      this.getList();
    },
    handleSizeChange1(val) {
      //条数改变11
      this.pageSize1 = val;
      this.getList();
    },
    addRecord() {
      //添加记录
      this.dialogForm = true;
      this.editorOff = false;
      this.$nextTick(() => {
        this.$refs["addForm"].resetFields();
        this.addForm = {
          Height: "",
          Weight: "",
          RecordDate: "",
          RecordMethod: "",
          IsGevenEquipment:"",
          IsEdema: "",
          DataSource: "",
        };
      });
      this.title = "添加跟踪记录";
    },
    handleEdit(index, row) {
      //修改记录
      this.editorOff = false;
      this.dialogForm = true;
      this.title = "修改跟踪记录";
      this.$nextTick(() => {
        this.$refs["addForm"].resetFields();
        this.addForm = JSON.parse(JSON.stringify(row));
      });
      this.addForm = JSON.parse(JSON.stringify(row));
    },
    editorRow(formName) {
      this.editorOff = true;
      this.optionsNurse.forEach((item) => {
        //绑定ID
        if (item.NurseName == this.addForm.Recorder) {
          this.addForm.RecorderId = item.NurseId;
        }
      });

      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.service({
            url: "/ResearchObject/SaveChildPhysique",
            method: "post",
            data: {
              ...this.addForm,
              researchObjectId: this.sysId,
              ChildSex: this.userBasic.ChildSex,
              ChildBirthDate: this.userBasic.ChildBirthDate,
            },
          })
            .then((response) => {
              this.dialogForm = false;
              this.service({
                url: "/ResearchObject/CalculationZvalue",
                method: "get",
                params: {
                  recordDate: this.addForm.RecordDate,
                  weight: this.addForm.Weight,
                  height: this.addForm.Height,
                  sex: this.userBasic.ChildSex,
                  childBirthDate: this.userBasic.ChildBirthDate,
                },
              })
                .then((response) => {
                  if (response.result > 1 && response.result < 2) {
                    this.$message({
                      message: "儿童存在超重风险",
                      type: "warning",
                    });
                  } else if (response.result > 2 && response.result < 3) {
                    this.$message({
                      message: "发现超重儿童",
                      type: "warning",
                    });
                  } else if (response.result >= 3) {
                    this.$message({
                      message: "发现肥胖儿童",
                      type: "warning",
                    });
                  }
                  setTimeout(() => {
                    this.editorOff = false;
                  }, 1000);
                })
                .catch((data) => {});
              this.getList();
            })
            .catch((data) => {
              setTimeout(() => {
                this.editorOff = false;
              }, 1000);
            });
        } else {
          setTimeout(() => {
            this.editorOff = false;
          }, 1000);
          return false;
        }
      });
    },
    getList: function () {
      //获取一级信息列表
      let that = this;
      that.userBasic = "";
      that.loading = true;
      if (that.resechObj.mobile || that.resechObj.researchNo) {
        that.sysId = "";
        that.mobile = that.resechObj.mobile;
        that.researchNo = that.resechObj.researchNo;
      }
      that
        .service({
          url: "/ResearchObject/GetParticipantDetail",
          method: "get",
          params: {
            itemType: "10",
            sysId: "",
            period: "",
            researchObjectId: that.sysId,
            mobile: that.mobile,
            researchNo: that.researchNo,
            pageCount: that.pageId - 1,
            pageSize: that.pageSize,
          },
        })
        .then((response) => {
          that.loading = false;
          response.dtData.dtBasic[0] ? (that.userBasic = response.dtData.dtBasic[0]) : "";
          that.tableData = response.dtData.dtPlan;
          if (that.tableData.length == 1) {
            that.showTop = false;
          } else {
            that.showTop = true;
          }
          that.total = parseInt(response.dtData.dtPlan[0].TotalCount);
        })
        .catch((data) => {
          that.loading = false;
        });
    },
  },
  mounted: function () {
    let that = this;
    that.sysId = that.$route.query.id;
    that.mobile = that.$route.query.mobile;
    that.researchNo = that.$route.query.researchNo;
    that.getList();
    that.GetNurse();
  },
  filters: {
    GroupType: function (val) {
      if (val == "" || val == undefined) {
        return "";
      }
      return val == "1" ? "A" : "B";
    },
    IntensityOfIntervention: function (val) {
      return filterIntensityOfIntervention(val)
    },
    Period: function (val) {
      return filterPeriod(val)
    },
    ChildSex(val) {
      return val == "1" ? "男" : val == "2" ? "女" : "未知";
    },
  },
};
function addZero(s) {
  return s < 10 ? "0" + s : s;
}
function setDate(dataTime, n, m) {
  var times = new Date(dataTime);
  times.setDate(times.getDate() + n + m * 7); //增加一天
  return dateForm(times);
}
function dateForm(data) {
  //日期格式化
  return (
    new Date(data).getFullYear() +
    "-" +
    addZero(new Date(data).getMonth() + 1) +
    "-" +
    addZero(new Date(data).getDate())
  );
}
function WeeksBetw(date1, date2) {
  //计算日期之间相差得天数
  var _dt1 = new Date(date1);
  var _dt2 = new Date(date2);
  var dt1 = _dt1.getTime();
  var dt2 = _dt2.getTime();
  return parseInt(Math.abs(dt1 - dt2) / 1000 / 60 / 60 / 24); //这里是计算天数,如果想获得周数则在该返回值上再除以7
}
function sortObj(prop) {
  return function (obj1, obj2) {
    var val1 = obj1[prop];
    var val2 = obj2[prop];
    if (!isNaN(Number(val1)) && !isNaN(Number(val2))) {
      val1 = Number(val1);
      val2 = Number(val2);
    }
    if (val1 < val2) {
      return -1;
    } else if (val1 > val2) {
      return 1;
    } else {
      return 0;
    }
  };
}
</script>
<style scoped lang="scss">
.user-p1 {
  .headerTop {
    margin-bottom: 30px;
    p {
      font-size: 16px;
      margin-bottom: 15px;
      color: #303133;
      span {
        padding: 10px;
      }
      .span1 {
        margin-left: 25px;
      }
    }
  }
  .user-pi-ul {
    margin: 0px auto 20px auto;
    li {
      float: left;
      width: 200px;
      margin-right: 20px;
    }
  }
}
.formX {
  .top {
    text-align: center;
  }
  ul {
    li {
      margin: 20px;
      h3 {
        color: #606266;
        font-weight: normal;
      }
      h5 {
        font-weight: normal;
        margin: 5px 0;
      }
      p {
        color: #999999;
        margin-bottom: 10px;
      }
    }
  }
}
.headerTop_ukl {
  /*border:1px solid #EDF1F7;*/
  padding: 5px 20px 10px 0px;
  min-width: 800px;
  width: 1000px;
  font-size: 14px;
  ul {
    li {
      float: left;
      margin-right: 50px;
      .p1 {
        color: #999999;
        padding-bottom: 5px;
        display: inline-block;
        img {
          display: inline-block;
          margin-right: 10px;
        }
      }
      .p3 {
        display: inline-block;
        padding-left: 10px;
        color: #666;
      }
    }
  }
}
.redspan {
  color: #fff;
  width: 30px;
  height: 25px;
  background: red;
  display: inline-block;
  line-height: 25px;
}
.grespan {
  color: #fff;
  width: 30px;
  height: 25px;
  background: #009900;
  display: inline-block;
  line-height: 25px;
}
.twospan {
  color: #fff;
  width: 30px;
  height: 25px;
  background: #fc9804;
  display: inline-block;
  line-height: 25px;
}
.thrspan {
  color: #7a6266;
  width: 30px;
  height: 25px;
  background: #ffff00;
  display: inline-block;
  line-height: 25px;
}
.fourspan {
  color: #fff;
  width: 30px;
  height: 25px;
  background: #92d050;
  display: inline-block;
  line-height: 25px;
}
.color1 {
  background: #8cba00;
  color: #fff;
}
.color2 {
  background: #ffcc00;
  color: #fff;
}
.color3 {
  background: #ff0000;
  color: #fff;
}
.color4 {
  background: #000000;
  color: #fff;
}
</style>
